<template>
    <div>
<h1>首页 (物业管理)</h1>

商铺名称：
<input type="text" v-model="can.name">

房屋状态：
<select v-model="can.zt">
    <option v-for="a in ba" :value="a.zId">{{ a.zName }}</option>
</select>

<input type="button" value="查询" @click="cha">
<input type="button" value="重置" @click="chong">
<a target="_blank" href="https://localhost:7170/api/Kzq/DaoC">导出商铺信息</a>

<table class="table">
<thead>
<tr>
    <td>商铺名称</td>
    <td>商铺楼层</td>
    <td>业主名称</td>
    <td>联系电话</td>
    <td>房屋状态</td>
    <td>操作</td>
</tr>
</thead>
<tbody>
    <tr v-for="a in da">
    <td>{{a.sName}}</td>
    <td>{{a.louCeng}}</td>
    <td>{{a.userName}}</td>
    <td>{{a.phone.substring(0,3)}}****{{ a.phone.substring(7,11) }}</td>
    <td :style="a.zName=='出租中'?'color: green;':'color: blue;'">{{a.zName}}</td>
    <td>
        <input type="button" value="删除" @click="shan(a.sId)">
        <input type="button" value="修改" @click="xiu(a.sId)">
    </td>
</tr>
</tbody>
</table>

共{{pa.zongye}}页，共{{pa.zongtiao}}条，当前第{{can.pageindex}}页，每页{{can.pagesize}}条
<input type="button" value="首页" @click="fen(1)">
<input type="button" value="上一页" @click="fen(can.pageindex-1)">
<input type="button" v-for="a in pa.zongye" :value="a" @click="xiaoyema(a)">
<input type="button" value="下一页" @click="fen(can.pageindex+1)">
<input type="button" value="尾页" @click="fen(pa.zongye)">
<select v-model="can.pagesize" @change="rong">
    <option value="3">每页3条</option>
    <option value="5">每页5条</option>
    <option value="10">每页10条</option>
</select>

<input type="number" placeholder="请输入要跳转的页码" v-model="can.pageindex">
<input type="button" value="跳转" @click="tiao">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
const uc=useRouter()

onMounted(()=>{
    bang()
    showw()
})

//小野马
const xiaoyema=(x:any)=>{
  can.value.pageindex=x;
  showw()
}
//改页容量
const rong=()=>{
    can.value.pageindex=1;
    showw()
}
//跳转页
const tiao=()=>{
    if(can.value.pageindex>=1&&can.value.pageindex<=pa.value.zongye){
        showw()
    }
}

//删除
const shan=(x:any)=>{
if(!confirm("确定吗")){
    return
}


  axios.delete("https://localhost:7170/api/Kzq/ShanSp",{params:{id:x}}).then(res=>{
    if(res.data>0){
        alert("删除成功")
        showw()
    }
    else{
        alert("删除失败");
    }
  })
}
//修改
const xiu=(x:any)=>{
  uc.push({path:'/fan',query:{id:x}})
}


const cha=()=>{
    can.value.pageindex=1;
    showw()
}

const chong=()=>{
 can.value.name="",
 can.value.zt=0,
 showw()
}

//分页
const fen=(x:any)=>{
    if(x>=1&&x<=pa.value.zongye){
        can.value.pageindex=x;
        showw()
    }
}

//数据的m
const da=ref([ {
      "sId": 0,
      "zhuangID": 0,
      "louCeng": "",
      "userName": "",
      "sName": "",
      "phone": "",
      "zName": ""
    }])

const can=ref({
    name:"",
    zt:0,
    pageindex:1,
    pagesize:3
})

const pa=ref({
    zongtiao:0,
    zongye:0
})

const showw=()=>{
    axios.get("https://localhost:7170/api/Kzq/ShowSp",{params:can.value}).then(res=>{
           da.value=res.data.plist
         pa.value.zongtiao=res.data.coun
         pa.value.zongye=Math.ceil(pa.value.zongtiao/can.value.pagesize)
    })
}

const ba=ref([{
    "zId": 0,
    "zName": ""
  }])


const bang=()=>{
    axios.get("https://localhost:7170/api/Kzq/BangZt").then(res=>{
        ba.value=res.data
    })
}
</script>

<style scoped>

</style>